<template>
	<view class="bottom_banner">
		<!-- phone-filled -->
		<view :class="['icons', checkIndex==0?'checks':'']" @click="toCustomer">
			<uni-icons :type="checkIndex==0?'phone-filled':'phone'" :color="checkIndex==0?'#00afcc':''"
				size="30"></uni-icons>
			<text>客服</text>
		</view>
		<view :class="['banners', checkIndex==1?'checks':'' ]" @click="toHome">
			<image src="../static/logo.png" mode=""></image>
			<text>乐游京津冀</text>
		</view>
		<view :class="['icons', checkIndex==2?'checks':'']" @click="toMine">
			<uni-icons :type="checkIndex==2?'person-filled':'person'" :color="checkIndex==3?'#00afcc':''"
				size="30"></uni-icons>
			<text>我的</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'

	const checkIndex = ref(1)
	// checkIndex.value = 1
	// 路由
	const route = getCurrentPages();
	// 监听路由变化
	onMounted((res) => {

		const currentPage = route[route.length - 1];
		// console.log(currentPage, currentPage.route)
		if (currentPage.route == 'pagesD/customer/customer') {
			checkIndex.value = 0
		} else if (currentPage.route == 'pagesA/home/home') {
			checkIndex.value = 1
		} else if (currentPage.route == 'pagesC/mine/mine') {
			checkIndex.value = 2
		}

	})

	function toCustomer() {
		uni.navigateTo({
			url: '/pagesD/customer/customer'
		})
	}

	function toHome() {
		uni.navigateTo({
			url: '/pagesA/home/home'
		})
	}

	function toMine() {
		uni.navigateTo({
			url: '/pagesC/mine/mine'
		})
	}
</script>

<style lang="less">
	.bottom_banner {
		width: 80%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		bottom: 40rpx;
		left: 10%;
		z-index: 999;
		box-shadow: 1rpx 1rpx 1rpx 1rpx lightgray;
		border-radius: 80rpx;
		display: flex;
		align-items: center;

		.icons {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: grey;

			text {
				font-size: 24rpx;
			}
		}

		.banners {
			width: 140rpx;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			top: -38rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			text {
				font-size: 24rpx;
			}
		}

		.checks {
			color: #00afcc;
		}

	}
</style>